<template>
  <div :style="rateStyle">

    <div>
<!--      {{rate}}-->
    </div>
    <slot></slot>
    <div class="rate" @mouseout="mouseOut">
      <span class="span" v-for="num in 5" @mouseover="mouseOver(num)">☆</span>
      <span class="hollow" :style="fontwidth">
        <span class="span" v-for="num in 5" @mouseover="mouseOver(num)" @click="onRate(num)">★</span>
      </span>
    </div>
  </div>
</template>

<script setup>
  import {defineProps, defineEmits, computed, ref} from 'vue'

  let props = defineProps({
    // value: Number,
    modelValue: Number,
    theme: {
      type: String,
      default: 'orange'
    }
  })
  // let rate = computed(() => "★★★★★☆☆☆☆☆".slice(5 - 5, 10 - 5))

  const themeObj = {
    'black': '#00',
    'white': '#fff',
    'red': '#f5222d',
    'orange': '#fa541c',
    'yellow': '#fadb14',
    'green': '#73d13d',
    'blue': '#40a9ff'
  }
  const rateStyle = computed(() => {
    return `color: ${themeObj[props.theme]}`
  })

  // let width = ref(props.value)
  let width = ref(props.modelValue)

  function mouseOver(num) {
    width.value = num
  }

  function mouseOut() {
    // width.value = props.value
    width.value = props.modelValue
  }

  const fontwidth = computed(() => `width:${width.value*13}px;`)

  // let emits = defineEmits('update-rate')
  let emits = defineEmits(['update:modelValue','update-rate'])
  function onRate(num) {
    emits('update-rate', num)
    emits('update:modelValue', num)
  }

</script>

<style scoped>
  .rate {
    position: relative;
    display: inline-block;
  }

  /*.rate span.span {*/
  /*  display: inline-block;*/
  /*  width: 14px;*/
  /*  height: 21px;*/
  /*}*/

  .rate > span.hollow {
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
    width: 0;
    /*height: 21px;*/
    overflow: hidden;
  }
</style>
